﻿@{
    ViewBag.Title = "Configuration";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="config2">
    <div class="panel panel-default" style="width: 1062px; padding: 41px; margin: 11px; height: 80px">
        <div id="Tabs" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
           <button onclick="getValues()" aria-controls="personal" role="tab" data-toggle="tab"  class="tablinks">Values</button>
               <button aria-controls="employment" onclick="getSettings()" role="tab" data-toggle="tab" class="tablinks">Settings</button>
            </ul>
            <!-- Tab panes -->
           
        </div></div>
                </div>
    <div id="container1">

</div>



<script>
    $(document).ready(function () {
       // $('#loading').show();
      //  getValues();

    })
    function getValues() {
        $('#loading').show();
        $('#container1').load('/SiteSetup/Values');
    }
    function getSettings() {
        debugger
        $('#loading').fadeIn();
        $('#container1').load('/SiteSetup/Settings');
        $('#loading').fadeOut();

    }
    $('.tablinks').click(function () {
        $(this).addClass('buttoncolor-change').siblings().removeClass('buttoncolor-change');
    });
</script>
<style>
    
      .tablinks {
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }
      .buttoncolor-change {
            background-color: cornflowerblue;
        }
    .valuesContainer {
        position: absolute;
   
    left: 350px;
    width: 655px;
  
    }
</style>
